<template>
  <view class="custom-tab-bar">
    <!-- 左侧首页 - Element Plus 图标 -->
    <view class="tab-item" @click="goToPage('pages/index/index')">
      <el-icon class="tab-icon">
        <HomeFilled/>
      </el-icon>
      <text class="tab-text">首页</text>
    </view>

    <!-- 中间突出按钮 - Element Plus 图标 -->
    <view class="central-btn" @click="openVoice">
      <el-icon class="icon-size">
        <Microphone/>
      </el-icon>
    </view>

    <!-- 右侧我的 - Element Plus 图标 -->
    <view class="tab-item" @click="goToPage('pages/mine/mine')">
      <el-icon class="tab-icon">
        <UserFilled/>
      </el-icon>
      <text class="tab-text">我的</text>
    </view>
  </view>
</template>

<script setup>
import {HomeFilled, UserFilled, Microphone} from '@element-plus/icons-vue'

// 页面跳转
const goToPage = (page) => {
  uni.navigateTo({url: `/${page}`})
}

// 语音功能逻辑
const openVoice = () => {
  console.log('触发语音功能')
}
</script>

<style scoped lang="scss">
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  background-image: linear-gradient(120deg, #fda085 0%, #f6d365 100%);

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tab-icon {
      color: #ffffff;
      font-size: 48rpx; /* 图标大小 */
    }

    .tab-text {
      font-size: 32rpx;
      color: #ffffff;
    }
  }

  .central-btn {
    position: relative;
    top: -40rpx;
    width: 140rpx;
    height: 140rpx;
    background-color: #FFB677;
    border-radius: 50%;
    box-shadow: 0 2rpx 10rpx rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;

    .icon-size {
      font-size: 72rpx;
      color: #fff;
    }
  }
}
</style>
